<%--
  Created by IntelliJ IDEA.
  User: JYC
  Date: 2022/4/12
  Time: 19:37:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>cust</title>
</head>
<body>
<div class="easyui-layout" style="width: 100%;height: 100%">
    <div data-options="region:'north',split:true" title="按条件查询" style="width:100%; height: 110px">
        <form id="qryBy" method="post" style="margin:0;padding:5px 5px">
            <span style="margin-right:10px">
                <input name="identity" class="easyui-textbox" label="证件号码:">
            </span>
            <span style="margin-right:10px">
                <input name="custname" class="easyui-textbox" label="姓名:">
            </span>
            <span style="margin-right:10px">
                <label>性别:</label>
                <input class="easyui-radiobutton" name="sex" value="1" label="男">&emsp;&emsp;&emsp;
                <input class="easyui-radiobutton" name="sex" value="0" label="女">&emsp;&emsp;&emsp;
                <input class="easyui-radiobutton" name="sex" value='' label="不选择" checked="true">
            </span>
            <span style="margin-right:10px">
                <input name="address" class="easyui-textbox" label="地址:">
            </span>
            <span style="margin-right:10px">
                <input name="phone" class="easyui-textbox" label="手机号码:">
            </span>
            <span style="margin-right:10px">
                <input name="career" class="easyui-textbox" label="职业:">
            </span>
        </form>
        <div align="center">
            <button onclick="qryBy()" class="easyui-linkbutton">查询</button>
            <button onclick="clearF()" class="easyui-linkbutton">清空</button>
        </div>
    </div>
    <div data-options="region:'center',title:'客户列表',iconCls:'icon-ok'">
        <table class="easyui-datagrid" toolbar="#toolbar" pagination="true" rownumbers="true" id="tb_data" striped="true"
               data-options="url:'getCust',method:'get',singleSelect:true,fit:true,fitColumns:true">
            <thead>
            <tr>
                <th data-options="field:'identity'" width="50">证件号码</th>
                <th data-options="field:'custname'" width="50">姓名</th>
                <th data-options="field:'sex',align:'right',formatter:function(value){return value==1?'男':'女'}"
                    width="30">性别
                </th>
                <th data-options="field:'address',align:'right'" width="60">地址</th>
                <th data-options="field:'phone'" width="60">手机号码</th>
                <th data-options="field:'career'" width="50">职业</th>
            </tr>
            </thead>
        </table>
        <div id="toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
               onclick="editUser()">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
               onclick="destroyUser()">删除</a>
            <a href="getCustExcel" class="easyui-linkbutton" iconCls="icon-remove" plain="true">导出</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="importUser()">导入</a>
        </div>
        <div id="dlg" class="easyui-dialog" style="width:400px"
             data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
            <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                <h3>编辑客户信息</h3>
                <div style="margin-bottom:10px">
                    <input name="identity" class="easyui-textbox" required="true" label="证件号码:" style="width:100%" id="id22">
                </div>
                <div style="margin-bottom:10px">
                    <input name="custname" class="easyui-textbox" required="true" label="姓名:" style="width:100%">
                </div>
                <div style="margin-bottom:10px">
                    <label>性别：</label>
                    <input class="easyui-radiobutton" name="sex" value="1" label="男">
                    <input class="easyui-radiobutton" name="sex" value="0" label="女">
                </div>
                <div style="margin-bottom:10px">
                    <input name="address" class="easyui-textbox" label="地址:" style="width:100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="phone" class="easyui-textbox" validType="length[7,11]" label="手机号码:"
                           style="width:100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="career" class="easyui-textbox" label="职业:" style="width:100%">
                </div>
            </form>
        </div>
    </div>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()"
       style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dlg').dialog('close')" style="width:90px">关闭</a>
</div>

<%--数据导入对话框--%>
<div id="cust_import_dlg" class="easyui-dialog" style="width:500px"
     data-options="closed:true,modal:true,border:'thin'">
    <form id="cust_import_fm" method="post"
          novalidate style="margin:0;padding:20px 50px" enctype="multipart/form-data">
        <input class="easyui-filebox" label="客户信息:"
               data-options="prompt:'选择Excel...'" style="width:80%" name="file">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
           plain="true" onclick="importCust()">上传</a>
    </form>
</div>

<script type="text/javascript">
    var url;

    function qryBy() {
        //将表单序列化为json对象
        var params = $("#qryBy").serializeJson();
        console.log(params);
        $("#tb_data").datagrid({
            queryParams: params
        });
    }

    function clearF() {
        $('#qryBy').form('clear')
    }

    function newUser() {
        $('#id22').textbox('readonly',false);
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
        $('#fm').form('clear');
        url = 'addCust';
    }

    function editUser() {
        var row = $('#tb_data').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑用户');
            $('#fm').form('load', row);
            $('#id22').textbox('readonly',true);
            url = 'updCust';
        }
    }

    function saveUser() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                console.log(result)
                let res = JSON.parse(result);
                console.log(res)
                if (res.errorMsg) {
                    console.log("进入异常输出")
                    $.messager.show({
                        title: '错误',
                        msg: res.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#tb_data').datagrid('reload');    // reload the user data
                    $('#id22').textbox('readonly',false);
                }
            }
        });
    }

    function destroyUser() {
        var row = $('#tb_data').datagrid('getSelected');
        console.log(row)
        if (row) {
            $.messager.confirm('确认', '确定要删除该用户吗？', function (r) {
                if (r) {
                    $.post('delCust', {'identity': row.identity}, function (result) {
                        if (result.success) {
                            $('#tb_data').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: '错误',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        }
    }

    function importUser() {
        $("#cust_import_dlg").dialog("open").dialog("setTitle","导入客户信息");
    }

    function importCust(){
        $("#cust_import_fm").form("submit",{
            url:"importCust",
            success:function(result){
                $("#cust_import_dlg").dialog("close");
                //刷新datagrid
                $("#tb_data").datagrid("reload");
            }
        });
    }

</script>
</body>
</html>
